﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Data Events</title>
    <script type="text/javascript" src="../lib/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../lib/dumpobj.js"></script>
    <script type="text/javascript" src="../lib/jQXB.1.1.js"></script>
</head>
<body>
    <h1>Data events Example</h1>
    <h2>Change data</h2>
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Name" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Surname" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Street" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.ZipCode" />
    <table>
        <thead>
            <tr>
                <th>Prefix</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="mydataDetails">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
            </tr>
        </tbody>
    </table>
    <!-- use jQXB to display object changes -->
    <div>
        Datasource underlying object<br />
        <textarea jqxb-datasource="mydataDump" jqxb-datamember="object" cols="100" rows="20"></textarea>
    </div>
    <script type="text/javascript">
        var Customer = { 'Name': 'Anthony',
            'Surname': 'Murray',
            'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH', 'Phones': [{ 'prefix': 010, 'number': 23094895 }, { 'prefix': 0185, 'number': 2930940 }, { 'prefix': 03485, 'number': 3234567}] },
            'MonthlyAmount': [13498, 23456, 12345, 12345, 38728, 0, 34231, 39748.95, 34534, 2134, 567, 666, 345]
        };
        // Common jQuery entry point
        jQuery(document).ready(function () {
            // Initialize the System
            jQXB.initialize();
            jQXB.setDataSource('mydata', Customer).doBind('mydata');
            // Creat a new DataSource for template ( data are shared between the two datasources )
            jQXB.setDataSource('mydataDetails', Customer.Address.Phones).doBind('mydataDetails');
            // Register before change event
            jQXB.addOnBeforeUpdatehnd(function (datasourceName, occurrency, currValuemember, memberPath, newValue) {
                switch (datasourceName) {
                    case 'mydata':
                    case 'mydataDetails':
                        if (occurrency == undefined) // Single object
                            return !confirm('The member : \'' + memberPath + '\' in datasource \'' + datasourceName + '\' is changing from \'' + currValuemember + '\' to \'' + newValue + '\', confirm?');
                        else
                            return !confirm('The Member : \'' + memberPath + '\' in datasource \'' + datasourceName + '\' ' + occurrency + '-th occurrency is changing from \'' + currValuemember + '\' to \'' + newValue + '\', confirm?');
                        break;

                }
            });
            // register after change event
            jQXB.addOnAfterUpdatehnd(function (datasourceName, occurrency, currValuemember, memberPath, newValue) {
                switch (datasourceName) {
                    case 'mydata':
                    case 'mydataDetails':
                        // Display object changes
                        var dataDump = new Object();
                        dataDump.object = dumpObj(Customer, 'Customer', "-", 1);
                        // 
                        jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
                        if (occurrency == undefined) // Single object
                            alert('The member : \'' + memberPath + '\' in datasource \'' + datasourceName + '\' is changed');
                        else
                            alert('The Member : \'' + memberPath + '\' in datasource \'' + datasourceName + '\' ' + occurrency + '-th occurrency has been changed');

                        break;
                }
            });
        });

    </script>
</body>
</html>
